<tagLib name="html" />

<include file="Public:header" />

<div id="page-body">
    <div id="qan-breadcrumbs"><span><a href="{$_global.site_url}">{$Think.lang.home}</a></span>&gt;&nbsp;<span>{$Think.lang.ask_question}</span></div>
    <div id="qan-content">
        <div id="ask-container" class="container">
            <form id="ask-form" action="{:U('Question/ask')}" method="POST" onsubmit="return validateForm();">
                <h2>{$Think.lang.ask_title}:</h2>
                <p class="ask-title"><input id="ask-title" name="title" autocomplete="off" value="{$title}" /></p>
                <div id="similar-questions"></div>
                <h2>{$Think.lang.ask_details}:</h2>
                <div id="qan-editor-container">
                    <html:markitup id="ask-details" name="details" content="" />
                </div>
                <p id="ask-counter" class="counter"></p>
                <h2>{$Think.lang.ask_category}:</h2>
                <div id="ask-category">
                    <select id="first-level" onchange="getCategoryOptions(this,'second-level')">
                        <option value="0">{$Think.lang.all_categories}</option>
                        <volist name="_topCategories" id="vo">
                        <option value="{$vo.category_id}">{$vo.name}</option>
                        </volist>
                    </select>
                    <select id="second-level" style="display:none" onchange="getCategoryOptions(this,'third-level')"></select>
                    <select id="third-level" style="display:none" onchange="getCategoryOptions(this,'third-level');"></select>
                </div>
                <fieldset>
                    <legend>{$Think.lang.ask_optional}</legend>
                    <p>{$Think.lang.ask_reward}: <html:select id="reward-point" name="reward_point" options="rewardOptions" /> ({$Think.lang.user_current_points})</p>
                    <p><input id="is-urgent" type="checkbox" name="is_urgent" value="1" /> <label for="is-urgent">{$Think.lang.ask_urgent} ({$Think.lang.ask_urgent_cost})</label></p>
                    <eq name="_global.tag_enable" value="1">
                    <h2>{$Think.lang.ask_tags}</h2>
                    <p class="ask-tags"><input id="ask-tags" class="input" type="text" name="tags" maxlength="110" size="60" value="" /></p>
                    <p class="tips">{$Think.lang.ask_tags_explain}</p>
                    </eq>
                    <h2>{$Think.lang.ask_notifications}:</h2>
                    <ul class="ask-notification">
                        <li><input id="notification" type="checkbox" name="new_answer_alert" value="1" <eq name="_user.new_answer_alert" value="1">checked</eq> /> <label for="notification">{$Think.lang.new_answer_alert}</label></li>
                    </ul>
                </fieldset>
                <eq name="captcha" value="1">
                <div class="captcha-container"><label for="verify">{$Think.lang.captcha}:</label><input id="verify" class="input verify" type="text" name="verify" value="" /><img class="captcha" src="{:U('Ajax/captcha')}" title="{$Think.lang.captcha_again}" onclick="reCaptcha(this);" /></div>
                </eq>
                <p>
                    <input class="btn" type="submit" value="{$Think.lang.post_question}" />
                    <input id="category-id" type="hidden" name="category_id" value="0" />
                    <input id="op" type="hidden" name="op" value="do" />
                </p>
            </form>
        </div>
    </div>
    <div id="qan-sidebar">
        <div id="ask-tips" class="mod">
            <h2>{$Think.lang.ask_tips_header}</h2>
            <ul>
                {$Think.lang.ask_tips_body}
            </ul>
            <p class="ft"><a href="{:U('Faq/index',array('fid'=>1))}">{$Think.lang.ask_tips_more}</a></p>
        </div>
    </div>
</div>

<include file="Public:footer" />

<style type="text/css">
.markItUp {width:600px;}
.markItUpEditor {width:543px;}
</style>

<load href="__PUBLIC__/Js/jquery.artTxtCount.js" />
<load href="__PUBLIC__/Js/jquery.autocomplete.js" />

<script type="text/javascript">

var askBoxTips = '{$Think.lang.ask_box_tips}';
var maxChars = '{$_global.max_post_chars}';
var tagUrl = APP + '/Ajax/getTags';

$(function(){

    if($('#ask-title').val() == askBoxTips){
        $('#ask-title').val('');
    }
    
    $('#ask-title').focus();
    
    $('#ask-details').artTxtCount($('#ask-counter'), maxChars);
    
    $('#ask-title').blur(function(){
        var postData = {title: $(this).val()};
        var postUrl = APP + '/Ajax/loadSimilarQuestions'
        $.post(postUrl, postData, function(html){
            $('#similar-questions').html(html);
        });
    });

    $('#ask-tags').autocomplete(tagUrl,{
        minChars: 2,
		width: 440,
		max: 10,
		highlight: false,
		multiple: true,
		multipleSeparator: ', ',
		scroll: true,
		scrollHeight: 300,
		formatItem: formatItem,
		formatResult: formatResult
	});
	
	function formatItem(row) {
		return row[0] + " (" + row[1] + ")";
	}
	
	function formatResult(row) {
		return row[0];
	}

});

function validateForm(){
    if($('#ask-title').val() == ''){
        $('#ask-title').focus();
        return false;
    }
    if($('#ask-details').val() == ''){
        $('#ask-details').focus();
        return false;
    }
    if($('#category-id').val() == 0){
        $('#first-level').focus();
        return false;
    }
}
</script>
